<template>
  <Teleport to="body">
    <div v-if="visible" class="modal-overlay" @click="handleOverlayClick">
      <div class="modal-container" @click.stop>
        <!-- 成功图标 -->
        <div class="success-icon">
          <img style="width: 80px" src="@/assets/order/pay_success.png" alt="" />
        </div>
        <!-- 标题 -->
        <h2 class="modal-title">
          {{
            orderInfo?.order_type == 2
              ? 'Nex successful'
              : orderInfo?.order_type == 4
              ? 'You are in nex!'
              : 'Order detail'
          }}
        </h2>
        <div class="modal-description my-[16px]">
          {{
            orderInfo?.order_type == 2
              ? 'Warrior, thank you for contributing to the design. We believe it will soon become a physical object'
              : orderInfo?.order_type == 4
              ? 'Thank you for supporting the design.We believe it will soon come to life.'
              : 'Your product will be delivered to you soon, please be patient'
          }}
        </div>

        <!-- 订单信息 -->
        <div class="order-info">
          <div
            class="flex justify-between items-center text-[16px]"
            v-if="orderInfo?.order_type !== 2 && orderInfo?.order_type !== 4">
            <span class="text-[#7A7A7A]">Order Number:</span>
            <span class="text-[#222] font-[500] ml-2">{{ orderInfo?.order_id }}</span>
          </div>
          <div class="flex justify-between items-center text-[16px]">
            <span class="text-[#7A7A7A]">Produce on Demand:</span>
            <span class="text-[#222] font-[500] ml-2">{{ orderInfo?.pod_name }}</span>
          </div>
          <img
            :src="orderInfo?.cover"
            class="w-[80px] h-[80px] object-cover rounded-[8px]"
            alt="" />
          <div class="text-[#7A7A7A] text-[16px]">
            {{
              orderInfo?.order_type == 1
                ? 'Design'
                : orderInfo?.order_type == 3
                ? 'Product Image'
                : 'Nex Design'
            }}
          </div>
        </div>

        <div
          class="text-[#7A7A7A] text-[16px] mt-[16px]"
          v-if="orderInfo?.order_type == 2 || orderInfo?.order_type == 4">
          Just {{ orderInfo?.nex_need_count }} more people for Nex to succeed!
        </div>

        <!-- 按钮组 -->
        <button class="btn" @click="handleConfirm">View My Orders</button>

        <!-- 关闭按钮 -->
        <button class="close-btn" @click="handleClose">
          <close />
        </button>
      </div>
    </div>
  </Teleport>
</template>

<script setup lang="ts">
  import { computed } from 'vue';
  import { useOrderStore } from '@/store/order';
  import { useRouter } from 'vue-router';
  import Close from '@/components/Close.vue';

  const router = useRouter();
  // 使用全局订单store
  const orderStore = useOrderStore();

  // 计算属性
  const visible = computed(() => orderStore.showPaymentSuccess);
  const orderInfo = computed(() => orderStore.paymentSuccessData);
  const showViewOrder = computed(() => false); // 可以根据需要调整

  const handleOverlayClick = () => {
    handleClose();
  };

  const handleClose = () => {
    orderStore.handlePaymentSuccessClose();
  };

  const handleConfirm = () => {
    router.push(`/orders`);
    orderStore.handlePaymentSuccessConfirm();
  };
</script>

<style scoped lang="scss">
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(4px);
    font-family: 'Inter Tight';
  }

  .modal-container {
    background: white;
    border-radius: 8px;
    padding: 24px;
    width: 480px;
    position: relative;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    animation: modalSlideIn 0.3s ease-out;
  }

  @keyframes modalSlideIn {
    from {
      opacity: 0;
      transform: translateY(-20px) scale(0.95);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .success-icon {
    display: flex;
    justify-content: center;
  }

  .modal-title {
    color: var(---9, #222);
    text-align: center;
    font-family: 'Inter Tight';
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
  }

  .modal-description {
    color: var(---6, #7a7a7a);
    font-family: 'Inter Tight';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
  }

  .order-info {
    display: flex;
    padding: 16px 24px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 8px;
    background: var(---2, #ededed);
    gap: 10px;
  }

  .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .label {
    font-size: 16px;
    color: #666;
    font-weight: 500;
  }

  .value {
    font-size: 16px;
    color: #1a1a1a;
    font-weight: 600;
    font-family: 'Inter Tight', sans-serif;
  }

  .btn {
    padding: 13px 24px;
    font-size: 18px;
    font-weight: 500;
    color: var(---0, #fff);
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    width: 100%;
    border-radius: 8px;
    background: var(---, linear-gradient(90deg, #f76b1b 0%, #dc3a0e 100%));
    backdrop-filter: blur(2px);
    margin-top: 40px;

    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 20px rgba(247, 107, 27, 0.3);
    }

    &.btn-secondary {
      background: #f8f9fa;
      color: #666;
      border: 1px solid #e9ecef;

      &:hover {
        background: #e9ecef;
        transform: translateY(-1px);
      }
    }
  }

  .close-btn {
    position: absolute;
    top: -2px;
    right: -32px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    color: #666;
    transition: all 0.3s ease;
  }

  // 响应式设计
  @media (max-width: 768px) {
    .modal-container {
      padding: 24px;
      margin: 16px;
    }

    .modal-title {
      font-size: 24px;
    }

    .button-group {
      flex-direction: column;
    }

    .btn {
      width: 100%;
    }
  }
</style>
